<template>
	<view class="content">
		<view class="rights_content">
			<view class="nav">
				<!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
				<scroll-view class="tab-scroll flex" scroll-x="true" scroll-with-animation  :scroll-left="scrollLeft" >
					<view class="tab-scroll_box">
						<!-- 选项卡类别列表 -->
						<view class="tab-scroll_item " v-for=" (item,index) in category" :key="index"
							 @click="chenked(index)">
							<text :class="{'active':isActive==index}"  class="tab-scroll_item1">{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 选项卡内容轮播滑动显示，current为当前第几个swiper子项 -->
			<swiper @change="change" class="swiper-content" >
				<swiper-item class="swiperitem-content" v-for="(item,index) in list" :key="index" >
					<scroll-view scroll-y class="sv" >
						<view class="nav_item">
							<image :src="item.src" mode="widthFix"></image>
							<view class="nav_item_c">
								<h4>{{item.title}}</h4>
								<p>{{item.title2}}</p>
								<text>{{item.title3}}</text>
								<view class="high">
									{{item.title4}}&gt;
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper><!--轮播图-->
			
		</view>
		<view class="quan_content">
			<view class="quan_top">
				<ul class="quan_t_nav">
					<li class="q_t_li flex" v-for="(item,index) in lists" :key="index" v-if="currentindex==index">
						<view class="q_t_left">
							{{item.text}}<text>{{item.text1}}</text>{{item.text2}}
						</view>
						<p>{{item.text3}}&gt;</p>
					</li>
				</ul>
			</view>
			<ul class="quan_list">
				<li class="q_li_li" v-for="(item,index) in listss" :key="index" v-if="currentindex==index">
					<ul class="q_li_li_ul flex">
						<li v-for="(items,indexs) in item.content" @click="jumpDetail(item.id)">
							<image :src="items.src" mode="" class="img"></image>
							<view class="q_one">
								{{items.text1}}
							</view>
							<p>{{items.text1}}</p>							
						</li>
					</ul>
				</li>
			</ul>
			
		</view><!--内容-->
		<b></b>
		<ul class="rights_bottom flex">
			<li class="" v-for="(item,index) in bottom" :key="index" @click="jumpNews(item.id)">
				 <h1>{{item.title}}&gt;</h1>
				 <p>{{item.text}}</p>
				 <image :src="item.src" mode="widthFix"></image>
			</li>
		</ul>
	</view>
</template>
<script>
	export default {
		watch: {
			// swiper与上面选项卡联动
			// currentindex(newval) {
			// 	this.isActive = newval;
			// 	this.scrollLeft = 1;
				
			// 	// 滑动swiper后，每个选项距离其父元素最左侧的距离
			// 	for (let i = 1; i < newval - 1; i++) {
			// 		this.scrollLeft += this.category[i].width
			// 		this.scrollRight += this.category[i].width
			// 	};
			// },
			currentindex(newval) {
				this.isActive = newval;
				this.scrollLeft = 0;
				
				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				for (let i = 0; i < newval - 1; i++) {
					this.scrollLeft += this.category[i].width
					
				};
			},
		},
		data() {
			return {
				isActive: 0,
				index: 0,
				currentindex: 0,
				contentScrollW: 0, // 导航区宽度
								scrollLeft: 0, // 横向滚动条位置
								fullHeight:"",	
								
				
				category: [{
						id: 1,
						name: '1',
					},
					{
						id: 2,
						name: '2',
					},
					{
						id: 3,
						name: '3',
					},
					{
						id: 4,
						name: '4',
					},
					{
						id: 5,
						name: '5',
					},
					{
						id: 6,
						name: '6',
					},
				],
				
				list:[
					{id:'1',src:'/static/images/rights (2).gif',title:'V1成长等级',title2:'升级可享受更多权益',title3:'0/200还需200成长值可升级',title4:'成长值详情'},
					{id:'2',src:'/static/images/rights (3).gif',title:'V2成长等级',title2:'达到200成长值可升级该等级',title4:'成长值详情'},
					{id:'3',src:'/static/images/rights (2).gif',title:'V3成长等级',title2:'达到700成长值可升级该等级',title4:'成长值详情'},
					{id:'4',src:'/static/images/rights (2).gif',title:'V4成长等级',title2:'达到1200成长值可升级该等级',title4:'成长值详情'},
					{id:'5',src:'/static/images/rights (2).gif',title:'V5成长等级',title2:'达到2100成长值可升级该等级',title4:'成长值详情'},
					{id:'6',src:'/static/images/rights (2).gif',title:'V6成长等级',title2:'达到3500成长值可升级该等级',title4:'成长值详情'},
				],
				lists:[
					{id:'1',text:'V1会员可享',text1:'0',text2:'项权益',text3:'领取记录'},
					{id:'2',text:'V2会员可享',text1:'1',text2:'项权益',text3:'领取记录'},
					{id:'3',text:'V3会员可享',text1:'1',text2:'项权益',text3:'领取记录'},
					{id:'4',text:'V4会员可享',text1:'4',text2:'项权益',text3:'领取记录'},
					{id:'5',text:'V5会员可享',text1:'8',text2:'项权益',text3:'领取记录'},
					{id:'6',text:'V6会员可享',text1:'8',text2:'项权益',text3:'领取记录'}
				],
				listss:[
					{
						id:'1',
						content:[
							{id:'1',src:'/static/images/rights (4).gif',text1:'优惠券',text2:'加油福利'},
					        {id:'2',src:'/static/images/rights (5).gif',text1:'加油金',text2:'抵油费'},
					        {id:'3',src:'/static/images/rights (6).gif',text1:'洗车劵5元',text2:'日常清洗'},
					        {id:'4',src:'/static/images/rights (7).gif',text1:'打蜡卷20元',text2:'汽车美容'},
					        {id:'5',src:'/static/images/rights (8).gif',text1:'保养劵100元',text2:'爱车养护'},
					        {id:'6',src:'/static/images/rights (9).gif',text1:'生日礼包',text2:'专享福利'},
					        {id:'7',src:'/static/images/rights (10).gif',text1:'抽奖',text2:'转盘抽好礼'},
					        {id:'8',src:'/static/images/rights (11).gif',text1:'专属客服',text2:'VIP服务'},
						]
					},
					{
						id:'2',
						content:[
							{id:'1',src:'/static/images/rights (4).gif',text1:'优惠券',text2:'加油福利'},
							{id:'2',src:'/static/images/rights (5).gif',text1:'加油金',text2:'抵油费'},
							{id:'3',src:'/static/images/rights (6).gif',text1:'洗车劵5元',text2:'日常清洗'},
							{id:'4',src:'/static/images/rights (7).gif',text1:'打蜡卷20元',text2:'汽车美容'},
							{id:'5',src:'/static/images/rights (8).gif',text1:'保养劵100元',text2:'爱车养护'},
							{id:'6',src:'/static/images/rights (9).gif',text1:'生日礼包',text2:'专享福利'},
							{id:'7',src:'/static/images/rights (10).gif',text1:'抽奖',text2:'转盘抽好礼'},
							{id:'8',src:'/static/images/rights (11).gif',text1:'专属客服',text2:'VIP服务'},
						]
					},
					{
						id:'3',
						content:[
							{id:'1',src:'/static/images/rights (4).gif',text1:'优惠券',text2:'加油福利'},
							{id:'2',src:'/static/images/rights (5).gif',text1:'加油金',text2:'抵油费'},
							{id:'3',src:'/static/images/rights (6).gif',text1:'洗车劵5元',text2:'日常清洗'},
							{id:'4',src:'/static/images/rights (7).gif',text1:'打蜡卷20元',text2:'汽车美容'},
							{id:'5',src:'/static/images/rights (8).gif',text1:'保养劵100元',text2:'爱车养护'},
							{id:'6',src:'/static/images/rights (9).gif',text1:'生日礼包',text2:'专享福利'},
							{id:'7',src:'/static/images/rights (10).gif',text1:'抽奖',text2:'转盘抽好礼'},
							{id:'8',src:'/static/images/rights (11).gif',text1:'专属客服',text2:'VIP服务'},
						]
					},
					{
						id:'4',
						content:[
							{id:'1',src:'/static/images/rights (4).gif',text1:'优惠券',text2:'加油福利'},
					        {id:'2',src:'/static/images/rights (5).gif',text1:'加油金',text2:'抵油费'},
							  {id:'3',src:'/static/images/rights (9).gif',text1:'生日礼包',text2:'专享福利'},
							  {id:'4',src:'/static/images/rights (10).gif',text1:'抽奖',text2:'转盘抽好礼'},
					        {id:'5',src:'/static/images/rights (6).gif',text1:'洗车劵5元',text2:'日常清洗'},
					        {id:'6',src:'/static/images/rights (7).gif',text1:'打蜡卷20元',text2:'汽车美容'},
					        {id:'7',src:'/static/images/rights (8).gif',text1:'保养劵100元',text2:'爱车养护'},
					        {id:'8',src:'/static/images/rights (11).gif',text1:'专属客服',text2:'VIP服务'},
						]
					},
					{
						id:'5',
						content:[
							{id:'1',src:'/static/images/rights (4).gif',text1:'优惠券',text2:'加油福利'},
							{id:'2',src:'/static/images/rights (5).gif',text1:'加油金',text2:'抵油费'},
							{id:'3',src:'/static/images/rights (6).gif',text1:'洗车劵5元',text2:'日常清洗'},
							{id:'4',src:'/static/images/rights (7).gif',text1:'打蜡卷20元',text2:'汽车美容'},
							{id:'5',src:'/static/images/rights (8).gif',text1:'保养劵100元',text2:'爱车养护'},
							{id:'6',src:'/static/images/rights (9).gif',text1:'生日礼包',text2:'专享福利'},
							{id:'7',src:'/static/images/rights (10).gif',text1:'抽奖',text2:'转盘抽好礼'},
							{id:'8',src:'/static/images/rights (11).gif',text1:'专属客服',text2:'VIP服务'},
						]
					},
					{
						id:'6',
						content:[
							{id:'1',src:'/static/images/rights (4).gif',text1:'优惠券',text2:'加油福利'},
							{id:'2',src:'/static/images/rights (5).gif',text1:'加油金',text2:'抵油费'},
							{id:'3',src:'/static/images/rights (6).gif',text1:'洗车劵5元',text2:'日常清洗'},
							{id:'4',src:'/static/images/rights (7).gif',text1:'打蜡卷20元',text2:'汽车美容'},
							{id:'5',src:'/static/images/rights (8).gif',text1:'保养劵100元',text2:'爱车养护'},
							{id:'6',src:'/static/images/rights (9).gif',text1:'生日礼包',text2:'专享福利'},
							{id:'7',src:'/static/images/rights (10).gif',text1:'抽奖',text2:'转盘抽好礼'},
							{id:'8',src:'/static/images/rights (11).gif',text1:'专属客服',text2:'VIP服务'},
						]
					},
				],
				bottom:[
					{title:'福利中心',text:'完成任务，得加油金福利',id:'1',src:'/static/images/rights (1).gif' ,id:'1'},
					{title:'积分商城',text:'天天有福利，好物等你来',id:'2',src:'/static/images/rights (12).gif',id:'2'}
				]
			}
		},
		mounted() {
			var that = this;
			 //获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
			uni.getSystemInfo({
			      success: function (res) {
				         that.fullHeight ="height:" + res.windowHeight + "px";
				  }
				});
			// 获取标题区域宽度，和每个子元素节点的宽度
			this.getScrollW()
		},
		methods: {
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-scroll').boundingClientRect(data => {
					// 拿到 scroll-view 组件宽度
					this.contentScrollW = data.width
				}).exec();
				query.selectAll('.tab-scroll_item1').boundingClientRect(data => {
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
						//  scroll-view 子元素组件距离左边栏的距离
						this.category[i].left = data[i].left;
						this.category[i].right = data[i].right;
						//  scroll-view 子元素组件宽度
						this.category[i].width = data[i].width
					}
				}).exec()
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
						chenked(index) {
							this.isActive = index;
							this.scrollLeft = 0;
							
							for (let i = 0; i < index -1; i++) {
								this.scrollLeft += this.category[i].width
								
							};
						},
						// swiper滑动时，获取其索引，也就是第几个
						change(e){
							const {current} = e.detail;
							this.currentindex = current;
						},	
						jumpDetail:function(id){
							uni.navigateTo({
								url: './sanji/rights_detail',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						},
						jumpNews:function(id){
							if(id==1){
								uni.navigateTo({
									url: './mine-check',
									success: res => {},
									fail: () => {},
									complete: () => {}
								});
							}else{
								uni.navigateTo({
									url: '#',
									success: res => {},
									fail: () => {},
									complete: () => {}
								});
							}
						}
						
		}
	}
</script>
<style lang="scss">
	$color:#ecc89d;
	$color1:#996f4a;
	$color2:#713a11;
	.img{display: block;width: 3rem;height:3rem;margin: 0 auto;}
	.flex{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
	.rights_content{height: 430rpx;width: 95%;background-color: #527d9d;padding: 20rpx ;}
	page {
		height: 100%;
		display: flex;
		background-color: #FFFFFF;
	}
.content{width:100%;}
	.rights_content {
		display: flex;
		flex-direction: column;
		
		flex: 1;
	}
	.nav {z-index: 99;
		align-items: center;
		text-align: center;height: 10rpx;
		background-color: #6c8fab;position: relative;margin-top:20rpx ;
	}
	.tab-scroll {
		flex: 1;
		overflow: hidden;
		box-sizing: border-box;
		padding-left: 30rpx;
		padding-right: 30rpx;position: absolute;left: 0;top: -18rpx;bottom: -20rpx;	
	}
	.tab-scroll_box {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		box-sizing: border-box;
	}
	.sv{width: 96% !important;background-color: #527d9d;border-radius: 10rpx;}
	
// swiper-item{width:95% !important;margin-right: 30rpx;}
	.tab-scroll_item {flex-shrink: 0;height: 30rpx;text-align: center;font-size: 16px; margin-right: 80px;     
	text{display: inline-block;width:40rpx;height:40rpx;border:1px solid #fff;border-radius: 20rpx;background-color: #6c8fab;}}
	.swiper-content {flex: 1;margin-top: 40rpx;}
// .active::after {
// 		content: "";
// 		position: absolute;
// 		width: 130rpx;
// 		height: 4rpx;
// 		background-color: #ff0000;
// 		left: 0px;
// 		right: 0px;
// 		bottom: 0px;
// 		margin: auto;
// 	}
	// .swiperitem-content {height: 300rpx !important;}
	.swiperitem-content:nth-child(n+3) h4 , .swiperitem-content:nth-child(n+3) p {color: $color;}
 .nav_item {position: relative;}
.nav_item image{display: block;width:100%;height:100%;border-radius: 10rpx;}
.nav_item_c{position: absolute;left:50rpx;top:50rpx;}
.nav_item_c h4{font-size: 35rpx;color:#fff;margin-bottom: 20rpx;}
.nav_item_c p{line-height: 30rpx;color:#fff;margin-bottom: 20rpx;font-size:25rpx}
.nav_item_c text{font-size: 15rpx;color: aliceblue;line-height: 30rpx;display: inline-block;}
.nav_item_c .high{width:150rpx;line-height: 40rpx;font-size: 25rpx;background-color: $color;border-radius: 20rpx;text-align: center;}
	.active {position: relative;color: #713a11;font-weight: 600;background-color: #fff !important;}
	

//内容
.quan_content{background-color: #FFFFFF;padding: 40rpx 30rpx;}
.quan_t_nav{letter-spacing: 5rpx;}
.q_t_left text{color: #f00;}
.q_t_left p{font-size: 25rpx;}
.q_li_li_ul li{width: 25%;text-align: center;}
.quan_list{padding: 40rpx 0rpx;}
.q_li_li_ul li:nth-child(n+5){margin-top: 40rpx;}
.q_one{font-size: 26rpx;margin: 10rpx 0rpx;}
.q_li_li_ul p{font-size: 20rpx;line-height: 30rpx;}
b{width: 100%;height: 20rpx;background-color: #f5f5f5;}
//底部
.rights_bottom{padding: 30rpx 25rpx 0rpx 25rpx;margin-bottom: 60rpx;box-sizing: border-box;}
.rights_bottom li{width: 42.5%;background-color: #f8f9fb;padding: 22rpx;border-radius: 10rpx;}
.rights_bottom li image{float:right;width:150rpx; margin-top: 20rpx;}
.rights_bottom li h1{font-size: 40rpx;}
.rights_bottom li p{line-height: 40rpx;font-size: 26rpx;margin-top: 15rpx;}
.rights_bottom li:nth-child(n+2){color:$color2}
	// .active::after {
	// 	content: "";
	// 	position: absolute;
	// 	width: 130rpx;
	// 	height: 4rpx;
	// 	background-color: #ff0000;
	// 	left: 0px;
	// 	right: 0px;
	// 	bottom: 0px;
	// 	margin: auto;
	// }

	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	/deep/.uni-scroll-view::-webkit-scrollbar {
		display: none
	}
</style>
